<template>
    <div>
      <Button type="primary" @click="faceLogin">人脸登录</Button>
      <Modal
          width="600"
          v-model="faceModal"
          title="人脸识别">
        <div style="text-align: center">
          <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay style="margin-right: 20px"></video>
          <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
        </div>
        <div style="text-align: center">
          <Button @click="photographBtn" type="primary" class="btnClass">拍照</Button>
          <Button v-if="os" @click="openCamera" type="primary" class="btnClass">打开摄像头</Button>
          <Button v-else @click="stopCamera" type="primary" class="btnClass">关闭摄像头</Button>
          <Button @click="resetBtn" type="primary" class="btnClass">重置</Button>
          <Button @click="submitBtn" type="primary" class="btnClass">提交</Button>
        </div>
      </Modal>
<!--      <SstFaceAuthentication></SstFaceAuthentication>-->
<!--      <HSstFaceAuthentication></HSstFaceAuthentication>-->
    </div>
</template>

<script>
// import FaceAuthentication from './../../components/SstFaceAuthentication/index.js'
// import SstFaceAuthentication from '../../components/SstFaceAuthentication'
export default {
  name: 'index',
  // components: { SstFaceAuthentication },
  data () {
    return {
      faceModal: false,
      os: false, // 控制摄像头开关
      thisVideo: null,
      thisContext: null,
      thisCancas: null,
      imgSrc: '',
      videoWidth: 200,
      videoHeight: 200
    }
  },
  created () {
    // this.openCamera()
    this.$faceAuthentication.open()
  },
  methods: {
    faceLogin () {
      this.faceModal = true
      this.openCamera()
    },
    submitBtn () {
      console.log(this.imgSrc)
    },
    // 调用摄像头权限
    openCamera () {
      // 必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点
      this.$nextTick(() => {
        const _this = this
        this.os = false// 切换成关闭摄像头
        this.thisCancas = document.getElementById('canvasCamera')
        this.thisContext = this.thisCancas.getContext('2d')
        this.thisVideo = document.getElementById('videoCamera')
        // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
        if (navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {}
        }
        // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
        // 使用getUserMedia，因为它会覆盖现有的属性。
        // 这里，如果缺少getUserMedia属性，就添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
            // 首先获取现存的getUserMedia(如果存在)
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
            // 有些浏览器不支持，会返回错误信息
            // 保持接口一致
            if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
            }
            // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
            return new Promise(function (resolve, reject) {
              getUserMedia.call(navigator, constraints, resolve, reject)
            })
          }
        }
        const constraints = {
          audio: false,
          video: { width: _this.videoWidth, height: _this.videoHeight, transform: 'scaleX(-1)' }
        }
        navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
          // 旧的浏览器可能没有srcObject
          if ('srcObject' in _this.thisVideo) {
            _this.thisVideo.srcObject = stream
          } else {
            // 避免在新的浏览器中使用它，因为它正在被弃用。
            _this.thisVideo.src = window.URL.createObjectURL(stream)
          }
          _this.thisVideo.onloadedmetadata = function (e) {
            _this.thisVideo.play()
          }
        }).catch(err => {
          console.log(err)
          // this.$message({
          //   message: '没有开启摄像头权限或浏览器版本不兼容',
          //   type: 'warning'
          // })
        })
      })
    },
    // 拍照按钮
    photographBtn () {
      // 点击，canvas画图
      this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight)
      // 获取图片base64链接
      this.imgSrc = this.thisCancas.toDataURL('image/png')
    },
    // 清空画布
    clearCanvas (id) {
      let c = document.getElementById(id)
      let cxt = c.getContext('2d')
      cxt.clearRect(0, 0, c.width, c.height)
    },
    // 重置画布
    resetBtn () {
      this.imgSrc = ''
      this.clearCanvas('canvasCamera')
    },
    // 关闭摄像头
    stopCamera () {
      if (this.thisVideo && this.thisVideo !== null) {
        this.thisVideo.srcObject.getTracks()[0].stop()
        this.os = true// 切换成打开摄像头
      }
    }
  }
}
</script>

<style scoped>
.btnClass{
  margin-right: 10px;
}
</style>
